<!--编辑图片、显示-->
<template>
  <global-dialog ref="globalDialog"></global-dialog>


  <v-sheet>
    <div class="py-5 text-h4 font-weight-bold">
      精美图片
    </div>

    <v-row>
      <v-col
        v-for="item in picture"
        :key="item"
        class="d-flex justify-space-between ma-0"
        cols="4"
      >
        <v-hover>
          <template v-slot:default="{ isHovering, props }">
            <v-card
              v-bind="props"
              :color="isHovering ? 'primary' : undefined"
              class="pa-0"
            >
              <v-img
                :src="item"
                aspect-ratio="1"
                cover
                width="970"
                class="bg-grey-lighten-2"
              >
                <!-- 删除按钮-->
                <div v-if="isHovering" class="d-flex justify-end">
                  <v-btn
                    icon
                    class="bg-transparent hover:bg-red-800 "
                    @click="handleDelete(item)"
                  >
                    <v-icon class="hover:text-red-500">mdi-delete</v-icon>
                  </v-btn>
                </div>
              </v-img>
            </v-card>
          </template>
        </v-hover>
      </v-col>
      <v-col
        class="d-flex align-self-center justify-center"
        cols="4"
      >
        <v-card>
          <v-img
            aspect-ratio="1"
            cover
            width="970"
            class="bg-grey-lighten-3"
          >
            <div class="d-flex justify-center align-center" style="height: 100%;">
              <v-btn
                icon="mdi-plus"
                id="upload01"
                class="hover:bg-blue-500"
                size="x-large"
              >
              </v-btn>
            </div>
          </v-img>
        </v-card>


      </v-col>
    </v-row>
    <v-file-input v-show="false"
                  id="upload02"
                  accept="image/*"
                  v-model="files"
                  label="点击上传图片"
                  @change="handleFileChange"></v-file-input>
  </v-sheet>
</template>

<script>
import {getAllPicture, uploadPicture, deletePicture} from "@/api/uploadOss";
import GlobalDialog from "@/components/dialog/GlobalDialog.vue";

export default {
  name: "editPicture",
  components: {GlobalDialog},
  data: () => ({
    picture: [],
    files: [],
  }),
  mounted() {
    // 绑定按钮一起触发click，在点击upload01的click事件时候，也会触发upload02的click事件
    const btn1 = document.getElementById("upload01");
    const btn2 = document.getElementById("upload02");
    btn1.addEventListener('click', () => {
      btn2.click();
    })
    this.getAllPicture();
  },
  methods: {
    async handleDelete(pictureName) {
      console.log("点击删除图片名称：", pictureName)
      try {
        // ture 确定 false 取消
        const result = await this.$refs.globalDialog.openDialog('提示', '确定要删除此照片吗？');
        console.log("用户选择:", result);
        if (result) {
          //确定删除操作
          deletePicture(pictureName).then(() => {
            this.getAllPicture();
          })
        }
      } catch (error) {
        console.log("用户取消或出现错误:", error);
        // 在这里处理用户点击取消或出现错误的逻辑
      }
    },
    handleFileChange() {
      // 上传逻辑
      const formData = new FormData(); // 创建FormData对象
      formData.append("file", this.files[0]);
      uploadPicture(formData).then((res) => {
        console.log("上传结果回调函数", res);
        this.getAllPicture();
      })
    },
    getAllPicture() {
      getAllPicture().then((res) => {
        this.picture = res.data.data;
        console.log("================================查询图片列表1===", this.picture)
      });
    }
  },
}
</script>

<style scoped>
.img-trans {
  transform: scale(1.1);
  transition: all 0.5s;
}
</style>
